<template>
  <div>
    <div class="login-header-warpper">
      <div class="login-header-pop">
        <img class="login-header-logo" :src="logoImg">
        <template v-if="sysName">
          <div class="login-header-border"></div>
          <h3 class="login-header-title">{{sysName}}
            <span>V 1.2</span>
          </h3>
        </template>
      </div>
    </div>
    
    <div class="login-container" :style="{ backgroundImage: `url(${bgImage})` }">
      <div class="login-warpper">
        <h3 class="title-container">
            账户登录
        </h3>
        <el-form :model="parmas" ref="loginForm" class="login-form">
          <el-form-item prop="account" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' },
          {validator: (rule, val, d) => {
                  const reg = /\s/
                  val && reg.test(val) ? d(true) : d()
                },
                message: '用户名不能包含空格'}]">
            <span class="svg-container">
              账号
            </span>
            <el-input
              ref="account"
              v-model="parmas.account"
              placeholder="请输入用户名"
              type="text"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="pwd" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <span class="svg-container">
              密码
            </span>
            <el-input
              :key="passwordType"
              ref="pwd"
              v-model="parmas.pwd"
              :type="passwordType"
              placeholder="请输入密码"
              auto-complete="on"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
            </span>
          </el-form-item>
          <el-form-item prop="captcha" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
            <span class="svg-container">
              验证码
            </span>
            <div class="captcha-row">
              <el-input v-model="parmas.captcha" placeholder="请输入验证码" style="width: 60%; margin-right: 10px;"></el-input>
              <label class="captcha-image" @click="refreshCaptcha">
                <img :src="captchaUrl" alt="验证码图片" width="100%" height="100%">
              </label>
            </div>
          </el-form-item>
          <el-form-item style="position: relative;background: transparent;">
            <div class="cumostCaptcha" id="cumostCaptcha">
              <label class="links" @click="closeOpen"></label>
              <div id="captcha">
                <div id="msg"></div>
              </div>
            </div>
            <el-button style="width: 230px;" :disabled="loading" type="primary" @click="handlepwdLogin('loginForm')">{{$t('login.submit')}}</el-button>
            <el-button type="danger" @click="$refs.createForgotPwd.open()">忘记密码</el-button>
            <el-button type="info" @click="webPath">网站首页</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
   <!--  <div class="login-footer">四川豪运建设集团有限公司版权所有 渝ICP备20005835号-5 </div> -->
     <ForgotPwd ref="createForgotPwd"></ForgotPwd>


  </div>
</template>

<script>
import logo from '@/assets/logo5.jpg'
import bgImg from '@/assets/new_bg.jpg'
import { getDetailByKey } from "@/api/about_api";
import { getCaptcha} from '@/api/supplier_api'
import ForgotPwd from '@/components/forgotPwd'
import '@/assets/captcha/jigsaw.js';
import '@/assets/captcha/jigsaw.css';

export default {
  name: 'Login',
  components: {
    ForgotPwd
  },
  data() {
    return {
      captchaInstance: null,
      loading:false,
      captchaUrl:'',
      bgImage:'',
      logoImg: '',
      sysName:'',
      passwordType: 'password',
      parmas: { account: '', pwd: '',captcha:'',captchaKey:'' }
    }
  },
  computed: {
    logoData() {
      return this.$store.state.settings.logo
    }
  },
  watch: {
    logoData: {
      handler(val) {
        if (val) {
          this.logoImg = val
        }
      },
      deep:true
    }
  },
  mounted(){
    let _this = this;
    document.onkeydown = function(e) {
      e = e || window.event;
      if (e.keyCode == 13) {
        _this.handlepwdLogin("loginForm");
      }
    };
    this.getLogo()
    this.getSysName()
    this.getLogoBanner()
    this.refreshCaptcha();
  },
  methods: {
    initAcptcha() {
      const that = this;
     jigsaw.init({
        el: document.getElementById('captcha'),
        onSuccess: function() {
          document.getElementById('msg').style.display = 'block';
          document.getElementById("msg").style.background = "#24C628";
          document.getElementById('msg').innerHTML = '√验证成功！'
          that.loginnpm()
        },
        onFail: function(){
          document.getElementById('msg').style.display = 'block';
          document.getElementById("msg").style.background = "#c64024";
          document.getElementById('msg').innerHTML = 'x拼图失败'
        },
        onRefresh: function(){
          document.getElementById('msg').style.display = 'none';
        }
     })
    },
    // 刷新验证码
   async refreshCaptcha() {
      const { data } = await getCaptcha();
      this.captchaUrl = data?.base64Image
      this.parmas.captchaKey = data?.captchaKey;
    },
    async getLogo() {
      const { code, data } = await getDetailByKey('logo');
          if (code === 200) { 
              if (data) {
                  if (data.value) {
                      this.logoImg = data.value
                  } else {
                    this.logoImg = logo
                  }
              } else {
                this.logoImg = logo
              }
          }
    },
    async getLogoBanner() {
      const { code, data } = await getDetailByKey('loginbanner');
          if (code === 200) { 
              if (data) {
                if (data.value) {
                  let result = JSON.parse(data.value)
                  this.bgImage = result[0].url
                  } else {
                    this.bgImage = bgImg
                  }
              } else {
                this.bgImage = bgImg
              }
          }
    },
    async getSysName() {
      const { code, data } = await getDetailByKey('sysName');
          if (code === 200) { 
              if (data) {
                  if (data.value) {
                      this.sysName = data.value
                  } 
              } 
          }
    },
    showPwd() {
      if (this.passwordType === 'password') {
        
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.pwd.focus()
      })
    },
    handlepwdLogin(loginForm) {
      const that = this
      this.$refs[loginForm].validate(async valid =>{
        if (valid) {
          this.loading = true;
          this.$nextTick(() => {
            that.initAcptcha();
            that.openCaptcha('block')
          })
        } else {
          return false
        }
      })
    },
    closeOpen() {
      this.loading = false;
      this.resetCaptcha();
      this.openCaptcha('none')
    },
    openCaptcha(val) {
      document.getElementById('cumostCaptcha').style.display = val;
    },
    loginnpm() {
      const _copy = { ...this.parmas };
      let param = {
        account: _copy.account,
        captcha: _copy.captcha,
        captchaKey: _copy.captchaKey,
        pwd: _copy.pwd + process.env.VUE_APP_FILE_Name
      }
      try {
        this.$store.dispatch('user/login', param).then((res) => {
          if (res == 1) {
            this.$router.push({path:"/worksupplierbench"});
          } else {
            if (res == 2) {
              this.$router.push({ path: "/boardbench" });
            } else {
              this.$router.push({ path: "/workbench" });
            }
          }
        })
      } finally {
        this.loading = false;
        this.resetCaptcha();
        this.openCaptcha('none')
      }
    },
    resetCaptcha() {
      const parentDiv = document.getElementById('captcha');
      const msgElement = document.getElementById('msg');
      const savedElement = msgElement ? msgElement.cloneNode(true) : null;
      parentDiv.innerHTML = '';
      if (savedElement) {
        savedElement.style.display = 'none';
        parentDiv.appendChild(savedElement);
      }
    },
    webPath(){
      this.$router.push('/web/home');
    },
  }
}
</script>

<style lang="scss">

$bg:rgba(0, 0, 0, 0.9);
$light_gray:#fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: #000
  }
}

/* reset element-ui css */
.login-container {
  
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: #fff;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #000;
      height: 47px;
      caret-color: #000;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #fff inset !important;
        -webkit-text-fill-color: #000 !important;
      }
    }
  }

  .el-form-item {
    background: #fff;
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss">
$dark_gray:#889aa4;
$light_gray:#eee;
.el-tabs__item{
  color:#fff
}

.links{
  position: absolute;
    left: 20px;
    top: 16px;
    z-index: 9999;
    width: 15px;
    height: 18px;
    cursor: pointer;
    background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -79px;
    background-size: 34px 470px;
}

.login-footer{
  background-color: rgba(0,0,0,.5);
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 40px;
  color: #fff;
  text-align: center;
}

.captcha-row{
  display: inline-block;
  width: 85%;
  position: relative;
}
.captcha-image{
  cursor: pointer;
  height: 47px;
    position: absolute;
    right: -3px;
}
.captcha-image img{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: block;
}

.login-header-warpper{
 background-color: rgba(0,0,0,.5);
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 10;
  margin-bottom: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  height: 80px;
  .login-header-pop{
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    .login-header-logo{
      height: 46px;
      vertical-align: middle;
        border-style: none;
        color: #fff;
    }
    .login-header-border{
      height: 29px;
      width: 1px;
      background-color: #fff;
      margin: 0 36px 0 40px;
    }
    .login-header-title{
      font-size: 18px;
      color: #fff;
      span{
        display: inline-block;
        margin-left: 4px;
        font-size: 16px;
        font-weight: bold;
        color: #33FF33;
      }
    }
  }
}



.login-container {
  min-height: 100%;
  width: 100%;
  height: 100vh;
  //background: url('../assets/new_bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  .login-warpper{
    position: absolute;
    border-radius: 20px;
    width: 520px;
    left: 50%;
    top: 50%;
    padding: 60px 35px 35px;
    background: rgb(0,0,0,0.5);
    //background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    margin-top: 40px;
    z-index: 2;

  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 0px 5px 4px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 65px;
    display: inline-block;
  }

  .title-container {
    font-size: 36px;
    margin-top: 0;
    margin-bottom: 60px;
    padding-bottom: 25px;
    line-height: 40px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid #e5e5e5;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
